import { memo } from 'react'
import Taro from '@tarojs/taro'
import { connect } from 'react-redux'
import { Button, Image, View } from '@tarojs/components'
import { ossUrl } from '@/utils/config'
import { getLoginCode } from '@/utils'
import { setUser } from '@/actions/user'
import './index.scss'

const Welcome = ({ setUserInfo }) => {
  const mainSize = { width: '240px', height: '240px' }
  const goHome = () => {
    const userInfo = Taro.getStorageSync('userInfo')
    userInfo ? setUserInfo(userInfo) : getLoginCode()
    Taro.switchTab({ url: '/pages/home/index' })
  }
  return (
    <View className='welcome width_fill height_full relative text_center ov_hidden'>
      <Image src={ossUrl + '/logo.png'} className='logo'></Image>
      <Image src={ossUrl + '/welcome_title.png'} className='welcome_title mg_t_60'></Image>
      <View className='size_32 lh_48 mg_t_20'>跟小慕一起朗读英语课文吧！</View>
      <Image src={ossUrl + '/welcome_main.png'} className='welcome_main mg_t_40' style={{ ...mainSize }}></Image>
      <Button className='btn mg_t_60 bg_main cor_fff flex_center radius_16' onClick={goHome}>开始学习</Button>
      <View className='desc absolute size_24 width_fill text_center' style={{ color: '#bed4da' }}>Powered by 华为云EI</View>
    </View>
  )
}
const mapStateToProps = ({ user }) => ({
  userInfo: user.userInfo
});

const mapDispatchToProps = dispatch => ({
  setUserInfo(userInfo) {
    dispatch(setUser(userInfo))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(memo(Welcome))
